<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作日志查询测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .quick-query {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .quick-query h3 {
            margin-top: 0;
            color: #495057;
        }
        .quick-query button {
            background-color: #28a745;
            margin: 5px;
        }
        .quick-query button:hover {
            background-color: #1e7e34;
        }
        .pagination {
            margin: 20px 0;
            text-align: center;
        }
        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
        }
        .pagination span {
            margin: 0 10px;
            font-weight: bold;
        }
        .results {
            margin-top: 20px;
        }
        .log-item {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            background-color: #fafafa;
        }
        .log-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .log-type {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        .log-result {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .result-success {
            background-color: #d4edda;
            color: #155724;
        }
        .result-failed {
            background-color: #f8d7da;
            color: #721c24;
        }
        .log-details {
            color: #666;
            margin-bottom: 10px;
        }
        .log-meta {
            font-size: 12px;
            color: #999;
        }
        .error {
            color: #dc3545;
            background-color: #f8d7da;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success {
            color: #155724;
            background-color: #d4edda;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .loading {
            text-align: center;
            color: #666;
            font-style: italic;
        }
        .debug-info {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>操作日志查询测试</h1>
    
    <div class="container">
        <h2>查询条件</h2>
        <div class="form-group">
            <label for="operationType">操作类型:</label>
            <select id="operationType">
                <option value="">全部类型</option>
                <option value="create">创建</option>
                <option value="update">更新</option>
                <option value="delete">删除</option>
                <option value="query">查询</option>
                <option value="login">登录</option>
                <option value="logout">登出</option>
                <option value="publish">发布</option>
                <option value="offline">下线</option>
            </select>
        </div>
        <div class="form-group">
            <label for="module">操作模块:</label>
            <select id="module">
                <option value="">全部模块</option>
                <option value="article">文章管理</option>
                <option value="user">用户管理</option>
                <option value="role">角色管理</option>
                <option value="menu">菜单管理</option>
                <option value="operationlog">操作日志</option>
                <option value="systemsetting">系统设置</option>
            </select>
        </div>
        <div class="form-group">
            <label for="result">操作结果:</label>
            <select id="result">
                <option value="">全部结果</option>
                <option value="success">成功</option>
                <option value="failed">失败</option>
            </select>
        </div>
        <div class="form-group">
            <label for="ipAddress">IP地址:</label>
            <input type="text" id="ipAddress" placeholder="输入IP地址进行模糊查询">
        </div>
        <div class="form-group">
            <label for="startTime">开始时间:</label>
            <input type="datetime-local" id="startTime">
        </div>
        <div class="form-group">
            <label for="endTime">结束时间:</label>
            <input type="datetime-local" id="endTime">
        </div>
        <div class="form-group">
            <label for="pageSize">每页显示数量:</label>
            <select id="pageSize">
                <option value="5">5条</option>
                <option value="10" selected>10条</option>
                <option value="20">20条</option>
                <option value="50">50条</option>
            </select>
        </div>
        <button onclick="searchLogs()">查询日志</button>
        <button onclick="clearForm()">清空条件</button>
        <button onclick="testBasicQuery()">测试基础查询</button>
    </div>

    <div class="container">
        <div class="quick-query">
            <h3>快速查询</h3>
            <button onclick="quickQuery('article')">文章管理操作</button>
            <button onclick="quickQuery('create')">创建操作</button>
            <button onclick="quickQuery('failed')">失败操作</button>
            <button onclick="quickQuery('today')">今日操作</button>
            <button onclick="quickQuery('all')">查询所有</button>
        </div>
    </div>

    <div class="container">
        <h2>分页控制</h2>
        <div class="pagination">
            <button onclick="changePage(-1)" id="prevBtn">上一页</button>
            <span id="pageInfo">第 1 页，共 1 页</span>
            <button onclick="changePage(1)" id="nextBtn">下一页</button>
        </div>
    </div>

    <div class="container">
        <h2>查询结果</h2>
        <div id="results" class="results">
            <div class="loading">点击"查询日志"按钮开始查询...</div>
        </div>
    </div>

    <div class="container">
        <h2>调试信息</h2>
        <div id="debugInfo" class="debug-info">
            等待查询...
        </div>
    </div>

    <script>
        let currentPage = 1;
        let totalPages = 1;
        let totalCount = 0;

        // 查询日志
        async function searchLogs(page = 1) {
            const operationType = document.getElementById('operationType').value;
            const module = document.getElementById('module').value;
            const result = document.getElementById('result').value;
            const ipAddress = document.getElementById('ipAddress').value;
            const startTime = document.getElementById('startTime').value;
            const endTime = document.getElementById('endTime').value;
            const pageSize = parseInt(document.getElementById('pageSize').value);

            const params = new URLSearchParams();
            if (operationType) params.append('operationType', operationType);
            if (module) params.append('module', module);
            if (result) params.append('result', result);
            if (ipAddress) params.append('ipAddress', ipAddress);
            if (startTime) params.append('startTime', startTime);
            if (endTime) params.append('endTime', endTime);
            params.append('page', page);
            params.append('pageSize', pageSize);

            const resultsDiv = document.getElementById('results');
            const debugDiv = document.getElementById('debugInfo');
            
            resultsDiv.innerHTML = '<div class="loading">正在查询...</div>';
            debugDiv.innerHTML = `请求URL: http://localhost:5095/api/operationlog/list?${params.toString()}`;

            try {
                const response = await fetch(`http://localhost:5095/api/operationlog/list?${params.toString()}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                debugDiv.innerHTML += `<br>响应状态: ${response.status} ${response.statusText}`;

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                debugDiv.innerHTML += `<br>响应数据: ${JSON.stringify(data, null, 2)}`;
                
                if (data.success) {
                    displayResults(data.data);
                    updatePagination(data.data.pageIndex, data.data.totalPages, data.data.totalCount);
                } else {
                    resultsDiv.innerHTML = `<div class="error">查询失败: ${data.message}</div>`;
                }
            } catch (error) {
                console.error('查询错误:', error);
                debugDiv.innerHTML += `<br>错误信息: ${error.message}`;
                resultsDiv.innerHTML = `<div class="error">查询失败: ${error.message}</div>`;
            }
        }

        // 显示结果
        function displayResults(data) {
            const resultsDiv = document.getElementById('results');
            
            if (!data.items || data.items.length === 0) {
                resultsDiv.innerHTML = '<div class="loading">没有找到匹配的操作日志</div>';
                return;
            }

            let html = `<div class="success">找到 ${data.totalCount} 条操作日志，当前显示第 ${data.pageIndex} 页</div>`;
            
            data.items.forEach(log => {
                const resultClass = log.result === 'success' ? 'result-success' : 'result-failed';
                const resultText = log.result === 'success' ? '成功' : '失败';
                
                html += `
                    <div class="log-item">
                        <div class="log-header">
                            <div class="log-type">${log.operationType} - ${log.module}</div>
                            <span class="log-result ${resultClass}">${resultText}</span>
                        </div>
                        <div class="log-details">${log.description || '无描述'}</div>
                        <div class="log-meta">
                            操作人: ${log.operatorName} | 
                            IP地址: ${log.ipAddress} | 
                            操作时间: ${new Date(log.operationTime).toLocaleString()} | 
                            执行时间: ${log.executionTime}ms
                        </div>
                    </div>
                `;
            });

            resultsDiv.innerHTML = html;
        }

        // 更新分页信息
        function updatePagination(currentPageNum, totalPagesNum, totalCountNum) {
            currentPage = currentPageNum;
            totalPages = totalPagesNum;
            totalCount = totalCountNum;

            document.getElementById('pageInfo').textContent = `第 ${currentPage} 页，共 ${totalPages} 页 (总计 ${totalCount} 条)`;
            document.getElementById('prevBtn').disabled = currentPage <= 1;
            document.getElementById('nextBtn').disabled = currentPage >= totalPages;
        }

        // 切换页面
        function changePage(delta) {
            const newPage = currentPage + delta;
            if (newPage >= 1 && newPage <= totalPages) {
                searchLogs(newPage);
            }
        }

        // 快速查询
        function quickQuery(type) {
            clearForm();
            
            switch (type) {
                case 'article':
                    document.getElementById('module').value = 'article';
                    break;
                case 'create':
                    document.getElementById('operationType').value = 'create';
                    break;
                case 'failed':
                    document.getElementById('result').value = 'failed';
                    break;
                case 'today':
                    const today = new Date();
                    const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                    const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
                    document.getElementById('startTime').value = startOfDay.toISOString().slice(0, 16);
                    document.getElementById('endTime').value = endOfDay.toISOString().slice(0, 16);
                    break;
                case 'all':
                    // 不设置任何条件，查询所有
                    break;
            }
            
            searchLogs(1);
        }

        // 测试基础查询
        function testBasicQuery() {
            clearForm();
            searchLogs(1);
        }

        // 清空表单
        function clearForm() {
            document.getElementById('operationType').value = '';
            document.getElementById('module').value = '';
            document.getElementById('result').value = '';
            document.getElementById('ipAddress').value = '';
            document.getElementById('startTime').value = '';
            document.getElementById('endTime').value = '';
            document.getElementById('pageSize').value = '10';
        }

        // 页面加载时自动查询一次
        window.onload = function() {
            searchLogs(1);
        };
    </script>
</body>
</html> 